<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{/asserts/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
</head>
<body>
<form th:action="@{/front/updpwd}" class="form-horizontal" method="post" style="width: 400px;margin: 0 auto;padding-top: 15%" target="_top" name="upd_pwd_form">
    <div class="form-group">
        <label class="control-label col-md-4">请输入旧密码：</label>
        <div class="col-md-8">
            <input type="password" name="user_old_pwd" class="form-control "/>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-md-4">请输入新密码：</label>
        <div class="col-md-8">
            <input type="password" name="user_pwd" class="form-control "/>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-4">请确认新密码：</label>
        <div class="col-md-8">
            <input type="password" name="user_new_pwd" class="form-control "/>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-md-4"></label>
        <div class="col-md-8">

            <button type="button" class="btn btn-info" onclick="checkPwd()">确认</button>

        </div>
    </div>
</form>

<script type="text/javascript" th:src="@{/asserts/js/jquery-1.12.3.min.js}"></script>
<script type="text/javascript" th:src="@{/asserts/js/bootstrap.min.js}"></script>

<script th:inline="javascript">
//在js代码中使用thyemeleaf模板
    function checkPwd(){

        var userPwd = [[${session.loginuser.user_pwd}]]

          if(upd_pwd_form.user_old_pwd.value!=userPwd){

              alert("旧密码不正确");
              return;
          }
          if(upd_pwd_form.user_pwd.value!=upd_pwd_form.user_new_pwd.value){

              alert("两次新密码输入不一致");
              return ;
          }

        upd_pwd_form.submit();//如果符合条件，就提交表单

    }
</script>


</body>
</html>